<!--
* @description 物品详情
* @fileName goodsDetail.vue
* @author huangyu
* @date 2023/02/17 16:11:22
!-->
<template>
    <div v-if="goodsModel">
        <el-row>
            <el-col :span="6">
                <div style="height:36px;position: relative;cursor:pointer;">
                        <img :src="`https://7765-web-cloud0713-6g519i65f479e638-1301064135.tcb.qcloud.la/GamePublic/${goodsModel.icon}`" alt="">
                        <div class="zx-icon-bg"></div>
                    </div>
            </el-col>
            <el-col :span="16">
                <h2 style="margin-top:0;">{{goodsModel.name}}</h2>
                <ul>
                    <li>攻击：{{goodsModel.gjl}}</li>
                    <li>职业：{{goodsModel.classStr}}</li>
                    <li>等级：{{goodsModel.level}}</li>
                    <li>品质：{{goodsModel.pinzhi}}</li>
                    <li>类型：{{goodsModel.typeStr}}</li>
                </ul>
                <ul>
                    <li><strong>附加属性</strong></li>
                    <li v-for="(item,index) in goodsModel.fujia" :key="index">{{item}}</li> 
                </ul>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { get } from '@/common/app.js'
export default {
    components: {},
    props:{
        id: String,
    },
    data() {
        return {
            goodsModel: {},
        }
    },
    mounted() {

    },
    methods: {
        getData(){
            let params = {
                type: 'getGoods',
                api: 'api-goods-detail',
                data: {
                    _id: this.id,
                },
            }
            get('game', params).then(res => {
                if (res) {
                    this.goodsModel = res
                    console.log(res)
                }
            })
        },
    },
    watch: {
        id:{
            handler:"getData",
            immediate: true,
        }
    }
}
</script>

<style scoped>

</style>